import * as YvanUI from 'yvan-ui-wotu'

const _ = YvanUI.lodash

interface Ref {
    theform: YvanUI.Form
}

const rowSetting1 = {
    gutter: {xs: 0, sm: 0, md: 4},
}

const colSetting1 = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 8,
    xl: 6,
}

const colSetting2 = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 16,
    xl: 12,
}

const colSetting3 = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 18,
}

const colSetting4 = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 24,
}

export default class Layout1 extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        form: {
            f1: '',
            f2: '',
            f3: '',
        }
    })

    vjson = {
        title: '布局1',
        items:[
            {
                view: 'form',
                ref: 'theform',
                items: [
                    {
                        view: 'card',
                        rows: [
                            {
                                view: 'divider',
                                title: '基本信息',
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        label: '单位业务码',
                                        bind: 'main.form.f1',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '单位基本码',
                                        bind: 'main.form.f2',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        weight: 2,
                                        label: '公司名称',
                                        bind: 'main.form.f3',
                                        required: true
                                    }
                                ]
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        label: '证照类型',
                                        bind: 'main.form.f4',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        weight: 2,
                                        label: '证照号码',
                                        bind: 'main.form.f5',
                                        required: true
                                    }
                                ]
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        weight: 2,
                                        label: '单位名称',
                                        bind: 'main.form.f6',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '法人代表',
                                        bind: 'main.form.f7',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '客商业务类型',
                                        bind: 'main.form.f8',
                                        required: true
                                    }
                                ]
                            },
                            {
                                view: 'divider',
                                title: '地理属性'
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        weight: 2,
                                        label: '单位地址',
                                        bind: 'main.form.f9',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '经度',
                                        bind: 'main.form.f10',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '纬度',
                                        bind: 'main.form.f11',
                                        required: true
                                    }
                                ]
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        label: '国别',
                                        bind: 'main.form.f12',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '省',
                                        bind: 'main.form.f13',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '市',
                                        bind: 'main.form.f14',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '区',
                                        bind: 'main.form.f15',
                                        required: true
                                    }
                                ]
                            },
                            {
                                view: 'divider',
                                title: '业务信息'
                            },
                            {
                                cols: [
                                    {
                                        view: 'text',
                                        weight: 3,
                                        label: '关联关系',
                                        bind: 'main.form.f16',
                                        required: true
                                    },
                                    {
                                        view: 'text',
                                        label: '企业性质',
                                        bind: 'main.form.f17',
                                        required: true
                                    }
                                ]
                            },
                            {
                                cols: [
                                    {
                                        view: 'textarea',
                                        weight: 4,
                                        label: '主数据备注',
                                        bind: 'main.form.f18',
                                        required: true
                                    }
                                ]
                            }
                        ],
                    }
                ]
            }
        ],
        // items: [
        //     {
        //         view: 'form',
        //         ref: 'theform',
        //         items: [
        //             {
        //                 view: 'card',
        //                 title: '基本信息',
        //                 size: 'small',
        //                 items: [
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '单位业务码',
        //                                         bind: 'main.form.f1',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '单位基本码',
        //                                         bind: 'main.form.f2',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting2,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '公司名称',
        //                                         bind: 'main.form.f3',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             }
        //                         ]
        //                     },
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '证照类型',
        //                                         bind: 'main.form.f4',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting2,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '证照号码',
        //                                         bind: 'main.form.f5',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     },
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting2,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '单位名称',
        //                                         bind: 'main.form.f6',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '法人代表',
        //                                         bind: 'main.form.f7',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '客商业务类型',
        //                                         bind: 'main.form.f8',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     },
        //                 ]
        //             },
        //             {
        //                 view: 'card',
        //                 size: 'small',
        //                 title: '地理属性',
        //                 items: [
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting2,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '单位地址',
        //                                         bind: 'main.form.f9',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '经度',
        //                                         bind: 'main.form.f10',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '纬度',
        //                                         bind: 'main.form.f11',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     },
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '国别',
        //                                         bind: 'main.form.f12',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '省',
        //                                         bind: 'main.form.f13',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '市',
        //                                         bind: 'main.form.f14',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '区',
        //                                         bind: 'main.form.f15',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     },
        //                 ]
        //             },
        //             {
        //                 view: 'card',
        //                 title: '业务信息',
        //                 size: 'small',
        //                 items: [
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting3,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '关联关系',
        //                                         bind: 'main.form.f16',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting1,
        //                                 items: [
        //                                     {
        //                                         view: 'text',
        //                                         label: '企业性质',
        //                                         bind: 'main.form.f17',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     },
        //                     {
        //                         view: 'row',
        //                         ...rowSetting1,
        //                         items: [
        //                             {
        //                                 view: 'col',
        //                                 ...colSetting4,
        //                                 items: [
        //                                     {
        //                                         view: 'textarea',
        //                                         label: '主数据备注',
        //                                         bind: 'main.form.f18',
        //                                         required: true
        //                                     }
        //                                 ]
        //                             },
        //                         ]
        //                     }
        //                 ]
        //             }
        //         ]
        //     }
        // ],
        footer: [
            {
                view: 'button',
                type: 'primary',
                text: '保存',
                icon: 'fa fa-save',
                onClick: () => new Promise((resolve, reject) => {
                    this.refs.theform.validateFields().then(() => {
                        return resolve(this.main)

                    }).catch(e => {
                        YvanUI.showValidateErrorDialog(this, e)
                        return reject(e)
                    })
                })
            },
            {
                view: 'button',
                text: '取消',
                icon: 'fa fa-times',
                onClick: () => {
                    this.refs.theform.resetFields()
                }
            }
        ]
    }

}